<script setup lang="ts">
import { reactive, ref } from "vue";
import { onUnload } from "@dcloudio/uni-app";
import { login_reset_password_api } from "@/api/guider_home";
import { send_code_api } from "@/api/img_verification";
import { SECRET_KEY } from "@/constant/key";
import { REG_PHONE } from "@/constant/regular";
import { createCountDown } from "@/utils/timer";
import { Token } from "@/utils/token";
import { encryptByBase64DesEcbPkcs7 } from "@/utils/crypto";
import { Router } from "@/utils/router";
import { Toast } from "@/utils/toast";

import FormButton from "@/components/form/button.vue";
import CheckSlider from "@/components/check/slider.vue";

onUnload(() => countDown.stop());

const editForm = reactive({
  phone: "",
  password: "",
  password1: "",
  code: "",
});

const countDown = createCountDown(59, (e) => {
  countDownData.text = `${e.count}`.padStart(2, "0");
  countDownData.isFinish = e.isFinish;
});
const countDownData = reactive({ text: "", isFinish: true });

const checkPhone = (callback: (telephone: string) => void) => {
  const telephone = editForm.phone;
  if (!telephone) return Toast.show("请输入手机号码");
  if (!REG_PHONE.test(telephone)) return Toast.show("请输入正确的手机号码");
  callback(telephone);
};

const codeClick = () => {
  if (!countDownData.isFinish) return;
  checkPhone((telephone) => {
    checkSlider.value?.check((id) => {
      Toast.showLoading();
      send_code_api({
        sms_id: id,
        telephone,
        send_type: 1,
        secret: Token.getSecret(telephone),
      })
        .then(() => {
          Toast.hideLoading();
          countDown.start();
          Toast.show("验证码发送成功");
        })
        .catch(() => Toast.hideLoading());
    });
  });
};

const submitClick = () => {
  checkPhone((phone) => {
    const password = editForm.password;
    if (!password) return Toast.show("请输入新密码");
    const password1 = editForm.password1;
    if (!password1) return Toast.show("请再次输入新密码");
    // if (password !== password1) return showToast("请再次输入新密码");
    const code = editForm.code;
    if (!code) return Toast.show("请输入验证码");
    Toast.showLoading();
    login_reset_password_api({
      phone,
      password: encryptByBase64DesEcbPkcs7(password, SECRET_KEY),
      password1: encryptByBase64DesEcbPkcs7(password1, SECRET_KEY),
      code,
    })
      .then(() => {
        Toast.hideLoading();
        Toast.show("修改密码成功");
        Router.navigateBack();
      })
      .catch(() => Toast.hideLoading());
  });
};

const checkSlider = ref<InstanceType<typeof CheckSlider>>();
</script>

<template>
  <view class="forget-desc">重新设置密码，通过短信验证完成密码修改</view>

  <view class="forget-form">
    <view class="forget-form-item">
      <input
        class="forget-form-input"
        v-model="editForm.phone"
        type="number"
        placeholder="请输入手机号"
      />
    </view>
    <view class="forget-form-item">
      <input
        class="forget-form-input"
        v-model="editForm.password"
        password
        placeholder="新密码"
      />
    </view>
    <view class="forget-form-item">
      <input
        class="forget-form-input"
        v-model="editForm.password1"
        password
        placeholder="确认新密码"
      />
    </view>
    <view class="forget-form-item">
      <input
        class="forget-form-input"
        v-model="editForm.code"
        type="number"
        placeholder="请输入验证码"
      />
      <view
        class="forget-form-code"
        :style="{ color: countDownData.isFinish ? '' : '#666666' }"
        @click="codeClick"
      >
        <template v-if="countDownData.isFinish">获取验证码</template>
        <template v-else>
          重新获取 <text style="color: #ff7900">{{ countDownData.text }}S</text>
        </template>
      </view>
    </view>

    <view class="forget-form-btn" @click="submitClick">
      <FormButton background="linear-gradient(90deg, #ff7900, #fac03b)">
        确认
      </FormButton>
    </view>
  </view>

  <CheckSlider ref="checkSlider" />
</template>

<style lang="scss">
page {
  padding-top: 40rpx;
  background-color: #ffffff;
}

.forget-desc {
  padding-left: 30rpx;
  margin-bottom: 30rpx;
  font-size: 28rpx;
  color: #666666;
  line-height: 40rpx;
}

.forget-form {
  margin: 0 60rpx;

  .forget-form-item {
    display: flex;
    align-items: center;
    height: 80rpx;
    padding-top: 30rpx;
    border-bottom: 2rpx solid #eeeeee;
  }

  .forget-form-input {
    flex-grow: 1;
    min-width: 0;
    font-size: 28rpx;
    color: #333333;
  }

  .forget-form-code {
    font-size: 28rpx;
    color: #ff7900;
    line-height: 60rpx;
  }

  .forget-form-btn {
    margin-top: 60rpx;
  }
}
</style>